<template>
  <div class="packages">
    <div class="container">
      <div class="aside">
        <div ref="refsTable">
          <el-form :model="queryParams" ref="queryForm" style="margin-top: 10px;" label-width="70px" :inline="true">
            <el-form-item label="录入时间">
              <el-date-picker v-model="entryRange" style="width:400px" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item label="登记时间">
              <el-date-picker v-model="dateRange" style="width:400px" value-format="yyyy-MM-dd HH:mm:ss"  :picker-options="pickerOptions"
                type="datetimerange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="条码号" prop="barcodeCode">
              <el-input v-model="queryParams.barcodeCode" style="width:160px" placeholder="请输入条码号" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="queryParams.keyword" style="width:160px" placeholder="送检单位/姓名" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>


            <el-form-item>
              <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table stripe border highlight-current-row @row-click="handleClick" :data="baseList"
          @selection-change="handleSelectionChange" :height="heights" :header-cell-style="{
            background: '#ebebeb'
          }">
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <af-table-column align="center" label="实验编号" prop="experimentNumber">
          </af-table-column>
          <af-table-column align="center" label="条码号" prop="barcodeCode" width="120">
          </af-table-column>
          <af-table-column align="center" label="状态">
            <template slot-scope="scope">
              {{ mainStateName[scope.row.mainState] }}
            </template>
          </af-table-column>
          <af-table-column prop="projectTypeName" align="center" width="350" label="项目类型"></af-table-column>
          <af-table-column prop="nucleicAcidName" align="center" width="120" label="核酸类型"></af-table-column>
          <af-table-column prop="sampleTypeName" align="center" label="样本类型" width="150">
          </af-table-column>
          <af-table-column prop="platformTypeName" align="center" label="平台类型"></af-table-column>
          <af-table-column prop="submitName" align="center" label="送检姓名">
          </af-table-column>
          <af-table-column prop="inspectionUnit" align="center" label="送检单位">
          </af-table-column>
          <af-table-column prop="cooperation" align="center" width="180" label="合作单位">
          </af-table-column>
          <!-- <af-table-column align="center" label="收样状态">
            <template slot-scope="scope">
              {{ scope.row.receiveStatus == 0 ? '不合格' : '合格' }}
            </template>
          </af-table-column> -->
          <af-table-column prop="remark" align="center" label="备注">
          </af-table-column>
        </el-table>
        <div>
          <pagination style="margin: 0;padding: 0;"   :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>


      </div>
      <div class="main">
        <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="80px">
          <el-form-item label="条码号" prop="barcodeCode">
            <el-input style="width:220px" v-model="form.barcodeCode" clearable :disabled="addStaus" />
          </el-form-item>
          <el-form-item label="实验编号" prop="experimentNumber">
            <el-input style="width:220px" v-model="form.experimentNumber" clearable disabled />
          </el-form-item>
          <el-form-item label="项目类型" prop="projectTypeName">
            <el-input style="width:220px" v-model="form.projectTypeName" clearable disabled />
          </el-form-item>
          <el-form-item label="核酸类型" prop="nucleicAcidName">
            <el-input style="width:220px" v-model="form.nucleicAcidName" clearable disabled />
          </el-form-item>
          <el-form-item label="送检单位" prop="inspectionUnit">
            <el-input style="width:220px" v-model="form.inspectionUnit" clearable disabled />
          </el-form-item>
          <el-form-item label="样本类型" prop="sampleTypeName">
            <el-input style="width:220px" v-model="form.sampleTypeName" clearable disabled />
          </el-form-item>
          <el-form-item label="合作单位" prop="cooperation">
            <el-input style="width:220px" v-model="form.cooperation" clearable disabled />
          </el-form-item>
          <el-form-item label="送检姓名" prop="submitName">
            <el-input style="width:220px" v-model="form.submitName" clearable disabled />
          </el-form-item>
          <!-- <el-form-item label="收样状态" prop="receiveStatus">
            <el-input style="width:220px" v-model="receiveStatusName[form.receiveStatus]" clearable disabled />
          </el-form-item> -->
          <el-form-item label="平台类型" prop="platformTypeName">
            <el-input style="width:220px" v-model="form.platformTypeName" clearable disabled />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input  v-model="form.remark" style="width: 531px;" clearable disabled type="textarea" />
          </el-form-item>
        </el-form>
        <div class="fontStyle">申请信息</div>


        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="申请人" prop="person">
            <el-input  v-model="form.person" style="width: 220px" disabled />
          </el-form-item>
          <el-form-item label="申请原因" prop="dictUpId">
            <el-select v-model="form.dictUpId" clearable size="small" style="width: 531px"
              :disabled="addStaus">
              <el-option v-for="item in reasonTemplateList" :key="item.id" :label="item.reasonName" :value="item.id" />
            </el-select>
          </el-form-item>




        </el-form>
        <div style="margin-top:20px">
          <el-button type="primary" size="small" @click="handleAdd" :disabled="btnSave">修改</el-button>
          <el-button type="primary" size="small" @click="submitForm" :disabled="btnAlter">确认修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reasonTemplate } from "@/api/dictionary/systemSetting/reasonTemplate"

import {
  based,
  baseEdit
} from "@/api/auxiliary/assistManagement/base"
import { enumerate } from "@/api/dictionary/systemSetting/enumeration"

export default {
  name: "baseInformation",
  data () {
    return {
      btnSave: true,
      btnAlter: true,
      addStaus: true,
      // 总条数
      total: 0,
      // 登记日期范围
      dateRange: [],
      // 录入时间范围
      entryRange: [],
      // 基本信息数据
      baseList: [],
      reasonTemplateList: [],
      enumerateId: '',
      sourceBarcodeCode: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        barcodeCode: undefined,
        keyword: undefined
      },
      // 表单参数
      form: {},
      //主流程状态
      mainStateName: {
        1: '已录入',
        2: '已登记',
        3: '已入库',
        4: '已提取',
        5: '已建库',
        6: '已测序',
        7: '已分析',
        8: '已初审',
        9: '已确认初审',
        10: '已复审',
        11: '已提交',
        12: '已上传',
        13: '不上传'
      },
      receiveStatusName: {
        0: '不合格',
        1: '合格'
      },
      rules: {
        dictUpId: [
          { required: true, message: "请选择申请原因", trigger: ["blur"] }
        ]
      },
      heights: undefined,
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      
    }
  },
  created () {
    // this.dateRange[0] = this.parseTime((new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000))
    // this.dateRange[1] = this.parseTime(new Date(new Date().toLocaleDateString()).getTime())
    // this.entryRange[0] = this.parseTime(new Date((new Date).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
    // this.entryRange[1] = this.parseTime(new Date(new Date).getTime(), '{y}-{m}-{d}')
    this.dateRange[0] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() 
    );
    this.dateRange[1] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() - 1000+ 24 * 60 * 60 * 1000
    );
    this.entryRange[0] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime()
    );
    this.entryRange[1] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() - 1000+ 24 * 60 * 60 * 1000
    );
    this.getList()
    this.getEnumerate()
  },
  mounted () {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 240
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 240
      }
    })
  },
  methods: {
    /** 查询基本信息列表 */
    getList () {
      based(this.addParameter(this.queryParams, this.dateRange, this.entryRange)).then((response) => {
        this.baseList = response.rows
        this.total = response.total
      })
    },
    getReason () {
      reasonTemplate().then(response => {
        response.rows.map(item => {
          // if (item.enumerateId === this.enumerateId) {
          //   this.reasonTemplateList.push(item)
          // }
          if (item.reasonType===2) {
            this.reasonTemplateList.push(item)
          }
          console.log(this.reasonTemplateList,222);
        })
      })
    },
    getEnumerate () {
      enumerate().then((response) => {
        response.rows.map(item => {
          if (item.name === '申请原因') {
            this.enumerateId = item.id
          }
        })
        this.getReason()
      })
    },
    //保存按钮
    handleAdd () {
      this.addStaus = false
      this.btnAlter = false
      this.btnSave = true
    },
    //点击数据列表
    handleClick (row, event, column) {
      this.sourceBarcodeCode = row.barcodeCode
      this.btnSave = false
      console.log(row)
      this.form = row
      // this.$set(this.form,'dictReasonId',this.form.dictReasonId)
      // this.$forceUpdate()
    },
    addParameter (params, dateRange, entryRange) {
      var search = params
      search.registrationStartTime = ""
      search.registrationEndTime = ""
      if (null != dateRange && '' != dateRange) {
        search.registrationStartTime = dateRange[0]
        search.registrationEndTime = dateRange[1]
      }
      search.entryStartDate = ""
      search.entryEndDate = ""
      if (null != entryRange && '' != entryRange) {
        search.entryStartDate = entryRange[0]
        search.entryEndDate = entryRange[1]
      }

      return search
    },
    
    /** 查询按钮操作 */
    handleQuery () {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.getList()
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.entryRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /** 修改按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let data = {
            // baseId: this.form.id,
            // dictReasonId: this.form.updateCodeDictReasonId,
            baseId: this.form.basedId,
            dictUpId: this.form.dictUpId,
            sourceBarcodeCode: this.sourceBarcodeCode,
            targetBarcodeCode: this.form.barcodeCode,
            stateId:this.form.stateId
          }
            console.log(data)
          baseEdit(data).then(response => {
            this.msgSuccess("修改成功")
            this.form = {}
            this.btnAlter = true
            this.btnSave = true
            this.addStaus = true
            this.getList()
          })

        }
      })
    },
    handleSelectionChange () {

    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px !important;
}

.packages {
  // position: relative;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;

  .container {
    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    display: flex;
  }

  .container2 {
    border: 1px solid rgb(220, 223, 230);
    // border-radius: 4px;
    // display: flex;
    height: 45vh;
    overflow-y: auto;
    background-color: #d5e4fb;
    padding: 5px
  }

  .aside {
    height: 82vh;
    width: 40%;
    border-right: 1px solid rgb(220, 223, 230);
    padding: 15px;
    box-sizing: border-box;
    //padding-bottom: 20px;
    position: relative;
  }

  .main {
    height: 82vh;
    width: 60%;
    padding: 15px;
    flex: 1;
    position: relative;
  }

  .container3 {
    display: flex;
    gap: 10px;
    background-color: #d5e4fb;
    width: 100%;
    height: 100vh;
    padding: 5px
  }

  .container4 {
    padding: 5px;
    background-color: #d5e4fb;
    width: 100%;
    height: 100vh;
  }

  .el-form-item__label-wrap {
    margin-left: 0px !important;
  }

  .demo-image__preview {
    position: relative;

    .el-icon-circle-close {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 99;
      font-size: 20px;
      color: white;
      cursor: pointer;
    }
  }

  .fontStyle {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 30px;
  }
}

::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}


::v-deep .el-table__body tr:hover>td {
  background: #a8d6fe !important;
}
</style>
